<template>
  <div>
    <el-row>
      <el-radio-group v-model="method">
        <el-radio v-for="support in supports" :label="support"/>
      </el-radio-group>
    </el-row>

    <!-- 功能操作区 -->
    <el-row class="margin-top ">
      <el-button-group>
        <el-button size="small" type="primary" @click="encryptText">加密</el-button>
        <el-button size="small"  @click="emptyText">清空</el-button>
      </el-button-group>
    </el-row>

    <el-row>
      <el-col :span="12" class="padding">
        <el-input
          v-model="plainText"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 30}"
          placeholder="这里输入明文"
        />
      </el-col>
      <el-col :span="12" class="padding">
        <el-input
          v-model="secretText"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 30}"
          placeholder="这里输入密文"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'

export default {
  name: 'digest',
  data(){
    return {
      method: 'MD5',
      plainText: null,
      secretText: null,
      password: null,
      supports: []
    }
  },
  mounted() {
    for(let key in CryptoJS){
      if (key.startsWith("MD5") || key.startsWith("SHA"))
      this.supports.push(key);
    }
  },
  methods: {
    emptyText(){
      this.plainText = null;
      this.secretText = null;
    },
    encryptText(){
      if (!this.plainText){
        this.$message('输入明文后继续')
        return ;
      }
      if (CryptoJS[this.method]){
        this.secretText = CryptoJS[this.method](this.plainText).toString()
      }

    }
  }
}
</script>


